<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PeopleNearbyMap.aspx.cs" Inherits="FriendsNearby.Fbml.PeopleNearbyMap" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<fb:FacebookApplication ID="fbApplication" runat="server" Mode="IFrame"
    EnableExternalBrowsing="true"
    ApplicationName="FriendsNearby" />
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
<%--Required to location control--%>
    <script type="text/javascript">
    var tabberOptions = {manualStartup:true};
    </script>
    <link rel="stylesheet" href="../Geo/tabs.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="../Geo/LocationBox.css" type="text/css" media="screen"/>
    <script type="text/javascript" src="../Geo/tabber-minimized.js"></script>
    <script type="text/javascript" src="../Geo/LocationBox.js"></script>    
    <link rel="stylesheet" href="facebook.css" type="text/css" media="screen"/>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<%= FriendsNearby.ConfigHelper.GoogleMapsAPIKey %>" type="text/javascript">
    </script>    
    <script type="text/javascript" src="RenderMap.js"></script>        
</head>
<body style="border: 0px; margin: 0px;" onload="initilize();">

<%--Change location control--%>

    <div id="myLocation" class="tabber" style="width:100%;margin-bottom:3px;">
        <div class="tabbertab" style="height:50px">
            <h2>DMS</h2>
            <div id="tabDMS"></div>
        </div>
        <div class="tabbertab" style="height:50px">
            <h2>Decimal</h2>
            <div id="tabDecimal"></div>
        </div>
        <div class="tabbertab tabbertabdefault" style="height:50px">
            <h2>Address</h2>
            <div id="tabAddress"></div>
        </div>
    </div>
<div id="updateLocationButtonLayer" class="standard_message" style="padding-bottom:3px; display:none">
<h1 class="status">You have changed your location on the map <input class="editor_button" value="Submit your new location" type="button" onclick="SubmitLocation(); return false;"/></h1>
</div>

<%--Google Map control--%>

    <div id="mapCanvas" style="width: 100%; height: 375px;">
    </div>
    
    <!--a onclick="openFullsizeMap();" style="float:left;cursor:pointer">View in new window</a-->
<br />
<span style="font-size:larger"><i><b>Tip:</b> Did you know that right-clicking on the map allows you to submit a new location?</i></span>

    <ul style="font-size: small;padding-top:3px;">
        <li style="list-style-image: url(./Images/ref-me.png)">&nbsp;You</li>
        <li style="list-style-image: url(./Images/ref-friend.png)">&nbsp;Direct contact</li>
        <li style="list-style-image: url(./Images/ref-foaf.png)">&nbsp;Contact of a contact</li>
    </ul>    


    <script type="text/javascript">
    //<![CDATA[
    var map, markerMe, markerFriend, markerFoaf;
    
    var myMarker = null; // this variable is setted upon initialize() method

    // first element is the current user information.
    function GetMapData() {
        return <%= RenderMapInitialization %>;
    }
    
    function openFullsizeMap() {
        var fullMapWnd =  window.open("FullsizeGoogleMap.aspx");
        
        // pass data to be renderer
        fullMapWnd.GetMapData = this.GetMapData;
    }
        
    function initilize() {
        map = new GMap2(document.getElementById("mapCanvas"));

        var meIcon = new GIcon(G_DEFAULT_ICON);
        meIcon.image = "./Images/marker-me.png";
	    markerMe = { icon:meIcon,dragCrossMove:true,draggable:true,bouncy:true};

        var friendIcon = new GIcon(G_DEFAULT_ICON);
        friendIcon.image = "./Images/marker-friend.png";
	    markerFriend = { icon:friendIcon };

        var foafIcon = new GIcon(G_DEFAULT_ICON);
        foafIcon.image = "./Images/marker-foaf.png";
	    markerFoaf = { icon:foafIcon };
        
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.addControl(new GScaleControl());
        map.addControl(new GOverviewMapControl());
        
        // first marker is asigned to myMarker which correspond to current user.
        myMarker = fillMap(map, GetMapData(), [markerMe, markerFriend, markerFoaf]);
        
        initTabber();
    }
        
    //]]>
    </script>
    
    <script type="text/javascript">
    //<![CDATA[
    var myLocation;
    
    function initTabber() {
        tabberAutomatic();
        
        myLocation = createLocationBox();
        createDmsBox(myLocation, document.getElementById('tabDMS'));
        createDecimalBox(myLocation, document.getElementById('tabDecimal'));
        createAddressBox(myLocation, document.getElementById('tabAddress'), {addressBox:{width:'480px'}});
        
        // this is before so setting current location doesn't display buttons
        <%= RenderCurrentLatLong %>
               
        var previewMarker = null; // marker to preview your new location.
        var previewMarker_dragging = false;
        var previewMarker_dopan = true;
        
        function AttachToDragAndDropForLocationUpdate(marker) {        
            GEvent.addListener(marker , "dragend", function() {
                // flag to bypass reentrant updates from ChangeLocationEvent
                // since the previewMarker is already in position.
                previewMarker_dragging = true;
                myLocation.SetLocation( marker.getLatLng().lat() , marker.getLatLng().lng() );
                previewMarker_dragging = false;
            });                    
        }

        function EnsurePreview( lat, lon ){
            if (previewMarker_dragging)
                return;
                
            var point = new GLatLng(lat,lon)
            if ( previewMarker == null ) {                
                previewMarker = new GMarker(point, markerMe );
                AttachToDragAndDropForLocationUpdate(previewMarker);
                map.addOverlay(previewMarker);
            }
            previewMarker.setLatLng(point);
            
            if (previewMarker_dopan) {
                map.panTo(point)
            }
        }
        
        // replace myMarker by a draggable one
        if (myMarker != null) {
          previewMarker = myMarker;
          AttachToDragAndDropForLocationUpdate( myMarker );
        }    
        //


        GEvent.addListener(map,"singlerightclick", function(point) {
            var ll = map.fromContainerPixelToLatLng(point)
            previewMarker_dopan = false;     
            myLocation.SetLocation( ll.lat() , ll.lng() );
            previewMarker_dopan = true;
        });        
        
        myLocation.AddLocationChangeEventListener( 
            function( m, p ) { 
                // show button for update location
                showUpdateLocationButton();
                // update map marker and position
                EnsurePreview( p.lat , p.lon );
            } 
        );  
    }     
        
        function SubmitLocation(){
            var updatePage = 'http://apps.facebook.com<%= FriendsNearby.ConfigHelper.FacebookUrl %>UpdateLocation.aspx';
            var queryString = 'lat=' + myLocation.lat + '&lon=' + myLocation.lon;
            window.open(updatePage + '?' + queryString, '_top');
        }
        
        function showUpdateLocationButton()
        {
            document.getElementById('updateLocationButtonLayer').style.display = 'block';
        }
        
        
    //]]>        
    </script>        
</body>
</html>
